<template>
    <a-layout style="height: 573px;">
        <a-layout>
            <a-layout-sider>
                <a-button type="primary" @click="organAdd">新增组织</a-button>
                <Modal />
                <a-input :style="{ width: '250px' }" placeholder="输入监测点组织名称" allow-clear />
                <a-list-item>
                    <a-list :bordered="false" :split="false">
                        <a-list-item v-for="(i,index) in comData"  @click="" class="com">
                            {{i.company}}
                        
                            <a-dropdown @select="handleSelect">
                                <icon-more-vertical />
                                <template #content>
                                    <a-doption>新增下级</a-doption>
                                    <a-doption>编辑区域</a-doption>
                                    <a-doption>删除区域</a-doption>
                                </template>
                            </a-dropdown>
                        </a-list-item>
                    </a-list>
                </a-list-item>
            </a-layout-sider>
            <a-layout-content>
                <a-card title="数据筛选" :bordered="true" :style="{ width: '100%' }">
                    <a-space class="operation">
                        <a-input :style="{ width: '250px' }" placeholder="输入监测点名称" allow-clear />
                        <a-button type="primary">查询</a-button>
                        <a-button type="dashed">重置</a-button>
                    </a-space>
                </a-card>
                <a-collapse v-for="i in comData">
                    <a-collapse-item key="1" v-for="j in i.point" :header="j.fatherAddress">
                        <template #extra>
                            <a-dropdown @select="handleSelect">
                                <icon-more-vertical />
                                <template #content>
                                    <a-doption>新增下级</a-doption>
                                    <a-doption>编辑区域</a-doption>
                                    <a-doption>删除区域</a-doption>
                                </template>
                            </a-dropdown>
                        </template>
                        <div v-for="k in j.children">{{ k.sonAddress }}</div>
                    </a-collapse-item>
                    
                </a-collapse>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script setup lang="ts">
import Modal from './modal.vue';
import { useObser } from "../../store/obserData";
let obser = useObser();
let num=1
const handleSelect = (v: any) => {
    console.log(v)
};
let organAdd = () => {
    obser.visible = true;
    console.log(obser.visible);

}
let comData = [{
    "company": "福田区公司",
    "id": "1101",
    "point": [
        {
            "fatherAddress": "南山区供水所",
            "addressId": "city001",
            "children": [
                {
                    "sonAddress": "高新科技园南",
                    "addressId": "city111"
                },
                {
                    "sonAddress": "大冲花园",
                    "addressId": "city112"
                }
            ]
        },
        {
            "fatherAddress": "福田区供水所",
            "addressId": "city002",
            "children": [
                {
                    "sonAddress": "梅林一村",
                    "addressId": "city113"
                },
                {
                    "sonAddress": "四季山水",
                    "addressId": "city114"
                }
            ]
        }
    ]
},
{
    "company": "巴南区公司",
    "id": "1102",
    "point": [
        {
            "fatherAddress": "南山区供水所",
            "addressId": "city001",
            "children": [
                {
                    "sonAddress": "高新科技园南",
                    "addressId": "city111"
                },
                {
                    "sonAddress": "大冲花园",
                    "addressId": "city112"
                }
            ]
        },
        {
            "fatherAddress": "福田区供水所",
            "addressId": "city002",
            "children": [
                {
                    "sonAddress": "梅林一村",
                    "addressId": "city113"
                },
                {
                    "sonAddress": "四季山水",
                    "addressId": "city114"
                }
            ]
        }
    ]
},
{
    "company": "渝中区公司",
    "id": "1103",
    "point": [
        {
            "fatherAddress": "南山区供水所",
            "addressId": "city001",
            "children": [
                {
                    "sonAddress": "高新科技园南",
                    "addressId": "city111"
                },
                {
                    "sonAddress": "大冲花园",
                    "addressId": "city112"
                }
            ]
        },
        {
            "fatherAddress": "福田区供水所",
            "addressId": "city002",
            "children": [
                {
                    "sonAddress": "梅林一村",
                    "addressId": "city113"
                },
                {
                    "sonAddress": "四季山水",
                    "addressId": "city114"
                }
            ]
        }
    ]
},
{
    "company": "江北区公司",
    "id": "1104",
    "point": [
        {
            "fatherAddress": "南山区供水所",
            "addressId": "city001",
            "children": [
                {
                    "sonAddress": "高新科技园南",
                    "addressId": "city111"
                },
                {
                    "sonAddress": "大冲花园",
                    "addressId": "city112"
                }
            ]
        },
        {
            "fatherAddress": "福田区供水所",
            "addressId": "city002",
            "children": [
                {
                    "sonAddress": "梅林一村",
                    "addressId": "city113"
                },
                {
                    "sonAddress": "四季山水",
                    "addressId": "city114"
                }
            ]
        }
    ]
},
{
    "company": "万州区公司",
    "id": "1105",
    "point": [
        {
            "fatherAddress": "南山区供水所",
            "addressId": "city001",
            "children": [
                {
                    "sonAddress": "高新科技园南",
                    "addressId": "city111"
                },
                {
                    "sonAddress": "大冲花园",
                    "addressId": "city112"
                }
            ]
        },
        {
            "fatherAddress": "福田区供水所",
            "addressId": "city002",
            "children": [
                {
                    "sonAddress": "梅林一村",
                    "addressId": "city113"
                },
                {
                    "sonAddress": "四季山水",
                    "addressId": "city114"
                }
            ]
        }
    ]
},
]
</script>

<style scoped>
.com{
    cursor: pointer;
}
.com:hover{
    color: #165dff;
}
</style>